<template>

    <div class="pad-l-20 pad-r-20">

        <div class="clearfix" >
            <div class="detila-div-80">
                <div>
                    <div class="radius-container">
                        <el-form :model="form" label-width="280px" :rules="rules" ref="form" class="pad-t-15">
                            <el-form-item label="轮番图片设置：" label-width="170px">
                                <div class="flex" v-if="form.picData.length<7">
                                    <div class="flex-item">
                                      <draggable class="content-box" tag="span"
                                            v-model="form.picData" dragable="true"
                                            :move="getdata" @update="datadragEnd">
                                          <template v-for="(item, key) in form.picData">
                                            <div class="pic-bar mar-r-30 flex-item" :key="key"
                                                      @mouseover.stop="itemOver(key)"
                                                      @mouseout.stop="itemOut(-1)">
                                                <div @click="deletePic(item,key)">
                                                    <svg-icon icon-class="close"
                                                              :class="{'active':key==curIndex || key==curHover}"
                                                              class="close-icon font-16 noraml-hide" />
                                                </div>
                                                <img class="picture" :src="item.bannerImage"/>
                                                <!-- @click="changeImgages(item,key) " -->

                                            </div>
                                          </template>
                                        </draggable>
                                        <span class="pic-add flex-item" v-if="form.picData.length<7">
                                            <div class="flex v-align-c height-130">
                                                <el-upload v-if="form.picData.length<10" class="upload-demo"
                                                           style="width:25%;"
                                                           action="/api/common/uploadFiles"
                                                           accept="image/jpeg,image/gif,image/png,image/bmp"
                                                           name="files" multiple
                                                           :data="token"
                                                           :show-file-list="false"
                                                           :on-success="handleUploadSuccess"
                                                           :before-upload="beforeUpload">
                                                    <el-button size="small" type="primary">点击上传</el-button>
                                                </el-upload>
                                            </div>
                                        </span>
                                    </div>
                                </div>
                                <template v-if="form.picData.length>=7">
                                    <div class="flex">
                                        <div class="flex-item">
                                            <draggable class="content-box" tag="span"
                                            v-model="form.picData" dragable="true"
                                            :move="getdata" @update="datadragEnd">
                                              <template v-for="(item, key) in form.picData">
                                                  <template v-if="form.picData.length>=7">
                                                      <div class="pic-bar mar-r-30 flex-item" :key="key"
                                                      @mouseover.stop="itemOver(key)"
                                                      @mouseout.stop="itemOut(-1)">
                                                          <div @click="deletePic(item,key)">
                                                              <svg-icon icon-class="close"
                                                              :class="{'active':key==curIndex || key==curHover}"
                                                              class="close-icon font-16 noraml-hide" />
                                                          </div>
                                                          <img class="picture" :src="item.bannerImage"/>

                                                      </div>
                                                  </template>
                                              </template>
                                            </draggable>
                                            <span class="pic-add flex-item" v-if="form.picData.length>=7 && form.picData.length<10">
                                                <div class="flex v-align-c height-130">
                                                    <el-upload v-if="form.picData.length<10 && form.picData.length>=7" class="upload-demo"
                                                               style="width:25%;"
                                                               action="/api/common/uploadFiles"
                                                               accept="image/jpeg,image/gif,image/png,image/bmp"
                                                               name="files" multiple
                                                               :data="token"
                                                               :show-file-list="false"
                                                               :on-success="handleUploadSuccess"
                                                               :before-upload="beforeUpload">
                                                        <el-button size="small" type="primary">点击上传</el-button>
                                                    </el-upload>
                                                </div>
                                            </span>
                                        </div>
                                    </div>
                                </template>
                                <div class="tips mar-t-3">建议尺寸：750*750像素，可以拖拽图片调整顺序，最多上传10张</div>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </div>
        </div>
        <div class="radius-container container-nonebg">
            <el-form label-width="80px">
                <el-button type="success" @click="save">保存</el-button>
            </el-form>
        </div>

    </div>
</template>

<style lang="less" scoped>
    .noraml-hide{
      display: none!important;
    }
    .active{
      display: block!important;
    }
    .span-bar{
        padding: 0 50px;
    }
    .remove-btn{
        padding: 7px 6px!important;
    }
    .long-input{
        width: 80%;
    }
    .long-input-2{
        width: 55%;
        margin-right: 5%;
    }
    .long-input-3{
        width: 55%;
    }
    .short-input{
        width: 20%;
    }
    .short-input-2{
        width: 25%;
    }
    .default-input{
        width: 50%;
    }
    .tips{
        color: gray;
        font-size: 12px;
        line-height: 1.2;
        padding-top: 5px;
    }
    .picture{
        width: 130px;
        height: 130px;
        display: block;
    }
    .pic-bar{
        position: relative;
        display: inline-block;
        .close-icon{
            position: absolute;
            right: -30px;
            top: -11px;
            width: 31px;
            height: 40px;
            padding: 0 7px;
            cursor: pointer;
        }
        span{
            position: absolute;
            right: 0;
            bottom: 0;
            width: 100%;
            display: block;
            color: #fff;
            text-align: center;
            padding: 3px 0;
            background: rgba(0,0,0,0.5);
            cursor: pointer;
        }
    }
    .pic-add{
        background: #fff;
        display: inline-block;
        vertical-align: top;
        border: #d3d3d3 1px dashed;
        border-radius: 5px;
        padding: 0 45px;
    }
    .btn-change{
      background: none!important;
      border: none!important;
      box-shadow: 0 0 0!important;
      font-size: 15px!important;
    }
</style>

<script>
  import elDragDialog from '@/directive/el-dragDialog' // base on element-ui
  import { getToken } from '@/utils/auth'
  import { saveBanner, listBanner } from '@/api/goods/banner'
  import draggable from 'vuedraggable'

  export default {
    components: {
      draggable
    },
    directives: {
      // 拖动窗口
      elDragDialog
    },
    data() {
      return {
        curIndex: -1,
        curHover: -1,
        token: '',
        form: {
          picData: []
        },
        enterpriseId: this.getEnterpriseId(),
        rules: {
        }
      }
    },
    // 初始化页面
    created() {
      this.token = { accessToken: getToken() }
      this.initBanner()
    },
    methods: {
      initBanner() {
        var data = {
          enterpriseId: this.enterpriseId
        }
        listBanner(data).then(response => {
          const array = []
          response.data.forEach(e => {
            var arrayData = {
              bannerImage: e.bannerImage,
              bannerId: e.bannerId,
              enterpriseId: e.enterpriseId
            }
            array.push(arrayData)
          })
          this.form.picData = array
        })
      },
      beforeUpload(file) {
        const isJPG = file.type === 'image/jpeg'
        const isGIF = file.type === 'image/gif'
        const isPNG = file.type === 'image/png'
        const isBMP = file.type === 'image/bmp'

        if (!isJPG && !isGIF && !isPNG && !isBMP) {
          this.$message.error('上传图片必须是JPG/GIF/PNG/BMP 格式!')
        }
        return (isJPG || isBMP || isGIF || isPNG)
      },
      handleUploadSuccess(res, file) {
        if (res.code === 101) {
          const bannerImage = res.data[0]
          const picData = this.form.picData
          var obj = {
            bannerImage: bannerImage,
            bannerId: null,
            enterpriseId: this.enterpriseId
          }
          picData.push(obj)
          this.form.picData = picData
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
          return false
        }
      },
      save() {
        const picData = this.form.picData
        if (picData.length === 0) {
          this.$message({
            type: 'warning',
            message: '请上传图片!'
          })
          return
        }
        saveBanner(picData).then(response => {
          this.initBanner()
          this.$message({
            type: 'success',
            message: '保存成功!'
          })
        })
      },
      deletePic(item, key) {
        const picData = this.form.picData
        picData.splice(key, 1)
        this.form.picData = picData
      },
      getdata(evt) {
        // 这里evt.draggedContext后续的内容根据具体的定义变量而定
      },
      datadragEnd(evt) {
        evt.preventDefault()
        const filters = this.form.picData
        for (let a = 0; a < filters.length; a++) {
          filters[a].index = a
        }
        this.form.picData = filters
      },
      itemOver(index) {
        this.curHover = index
      },
      itemOut(index) {
        this.curHover = index
      }
      //
    }
  }
</script>
